<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name='format-detection' content='telephone=no' />
<title>人车人</title>
<link rel="icon" href="/assets/img/titleico.ico" type="image/x-icon">
<link rel="stylesheet" href="/assets/css/common.css" />
<style>
	body {
		background-color: #f2f2f2;
	}
	
	header {
		height: 40px;
		overflow: hidden;
		position: relative;
		border-bottom: 1px solid #ccc;
	}
	
	header h2 {
		text-align: center;
		line-height: 40px;
		font-weight: normal;
		font-size: 18px
	}
	
	header .icon {
		width: 30px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-align-items: center;
		align-items: center;
    	-webkit-justify-content: flex-end;
    	justify-content: flex-end;
    	padding-right: 19px
	}
	
	header .user {
		right: 0;
		left: inherit;
		padding-right: 19px;
	}
	
	header .icon img {
		width: 12px;
	}
	
	header .user img {
		width: 20px;
	}
	
	header .user a {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	
	section {
		margin-top: 19px;
		padding: 0 10px 10%;
	}
	
	section .wrapper {
		border-radius: 5px;
		background-color: #fff;
		padding: 7px;
		padding-bottom: 15%;
	}
	
	section .wrapper .content .title {
		height: 38px;
		-webkit-align-items: center;
		align-items: center;
		border-bottom: 1px solid #ccc;
	}
	
	
	section .wrapper .content .title span {
		color: #999;
		font-size: 12px;
	}
	
	section .wrapper .resetxsz .reset-wrapper {
		-webkit-align-items: stretch;
		align-items: stretch;
		margin: 12px 0 14px;
		height: 93px;
	}
	
	section .wrapper .resetxsz .reset-wrapper img, section .wrapper .resetxsz .reset-wrapper .upload-wrapper {
		flex: 1;
		border-radius: 5px;
	}
	
	section .wrapper .resetxsz .reset-wrapper img {
		width: 126px;
		margin-right: 5px;
	}
	
	section .wrapper .resetxsz .reset-wrapper .upload-wrapper {
		margin-left: 5px;
		background-color: #f2f2f2;
		position: relative;
		text-align: center;
	}
	
	section .wrapper .resetxsz .reset-wrapper .upload-wrapper input {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
	
	section .wrapper .resetxsz .reset-wrapper .upload-wrapper img {
		width: 50px;
		margin: 15px 0 8px;
	}
	
	section .wrapper .resetxsz .reset-wrapper .upload-wrapper p {
		font-size: 13px;
		color: #999;
		margin-bottom: 5px;
	}
	
	section .wrapper .input .input-wrapper {
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
	}
	
	section .wrapper .input .input-wrapper ul li {
		padding: 5px 0;
		-webkit-align-items: center;
		align-items: center;
		border-bottom: 1px solid #e6e6e6;
	}
	
	section .wrapper .input .input-wrapper ul li:last-child {
		border-bottom: 0;
	}
	
	section .wrapper .input .input-wrapper ul li p {
		height: 36px;
		font-size: 14px;
	}
	
	section .wrapper .input .input-wrapper ul li p input {
		height: 100%;
	}
	
	section .wrapper .input .input-wrapper ul li p.key {
		width: 78px;
		color: #999;
		line-height: 36px;
		border-right: 1px solid #ccc;
		margin-right: 22px;
	}
	
	section .wrapper .tip {
		-webkit-align-items: center;
		align-items: center;
		font-size: 14px;
		color: #666;
		margin-top: 12px;
	}
	
	section .wrapper .tip img {
		width: 20px;
		margin-right: 7px;
	}
	
	section .wrapper .submit {
		margin-top: 34px;
		display: block;
		width: 100%;
		height: 43px;
		line-height: 43px;
		text-align: center;
		font-size: 18px;
		color: #fff;
		background-color: #f69000;
		border-radius: 5px;
		position: relative;
	}
	
	
</style>
</head>
<body>
	<header>
		<div class="icon flexbox" id="back"><img src="/assets/img/order_back.png" /></div>
		<h2>重新上传或手动录入信息</h2>
		<div class="icon user flexbox" id="back"><a href="#"></a><img src="/assets/img/order_user.png" /></div>
	</header>
		
	<section id="app">
		<div class="wrapper">
			<div class="content resetxsz">
				<div class="title flexbox">
					<span>重新上传行驶证照片</span>
				</div>
				<div class="reset-wrapper flexbox">
					<img src="/assets/img/cheliangdingjia-zhaopianshili@2x.png" />
					<div class="upload-wrapper">
						<input type="file" name="imgfile" id="file" />
						<img src="/assets/img/chongxinshangchuan-icon-zizhushangchuan@2x.png" />
						<p>重新上传行驶证</p>
					</div>
				</div>
			</div>
			<div class="content input">
				<div class="title flexbox" style="border: 0;">
					<span>手动录入行驶证信息</span>
				</div>
				<div class="input-wrapper">
					<ul id="input-wrapper">
						<li class="flexbox">
							<p class="key">车牌号：</p>
							<p class="value">
								<input type="text" tip="车牌号" name="plate_num" />
							</p>
						</li>
						<li class="flexbox">
							<p class="key">VIN&nbsp;代码：</p>
							<p class="value">
								<input type="text" tip="VIN代码" name="vin" />
							</p>
						</li>
						<li class="flexbox">
							<p class="key">发动机号：</p>
							<p class="value">
								<input type="text" tip="发动机号" name="engine_num" />
							</p>
						</li>
						<li class="flexbox">
							<p class="key">品牌型号：</p>
							<p class="value">
								<input type="text" tip="品牌型号" name="model" />
							</p>
						</li>
						<li class="flexbox">
							<p class="key">注册日期：</p>
							<p class="value">
								<input type="date" tip="注册日期" name="register_date" />
							</p>
						</li>
					</ul>
				</div>
			</div>
			<div class="tip">
				<img src="/assets/img/tishizhuyiyemian-orcshibie@2x.png" />
				<span>请确认识别信息是否与车辆行驶证上信息一致</span>
			</div>
			<a href="javascript:;" class="submit" id="submit">提交</a>
		</div>
	</section>
	
	<script src="/assets/js/fastclick.min.js"></script>
	<script src="/assets/js/jquery-3.1.1.min.js"></script>
	<script src="/assets/js/axios.min.js"></script>
	<script src="/assets/js/xxsg.js"></script>
	<script>
		$(function(){
			$('#back').click(function(){
		    	window.history.go(-1);
		    });
			
			var accept = "image/jpg, image/jpeg, image/png, image/gif",
				fileDom = $("#file"),
				inputWrapper = $("#input-wrapper")
		
			if(_x.isAndroid()){
				accept = "image/*"
			}    
			
			fileDom.attr("accept", accept)
			
			var mark = true
			$("#submit").click(function(){
				var that = $(this)
				if (!mark) {
					return					
				}
				mark = false
            	vaildate(function(obj, is){
            		if (is) {
            			saveSession(obj)
            			that.html("<div class='textloading'></div>")
	            			_x.showTip("提交成功！", {
							url: "/makeprice/carocr"
						})
            		} else {
            			mark = true
            		}
            	})
            	
			})
			
			fileDom.change(function(){
				var file = $(this)[0].files[0]
				if (_x.isEmpty(file)){
					return
				}
				mark = false
				_x.showTip("正在上传行驶证，请稍后...")
				$("#submit").html("<div class='textloading'></div>")
				upload_file(file, $(this), function (data) {
					saveSession(data, 1)
					_x.showTip("上传完毕", {
						url: "/makeprice/carocr"
					})
				})
			})
			
			
			function vaildate (fn) {
				var obj = {},
					mark = true
				inputWrapper.find("input").each(function(){
					var that = $(this),
						tip = that.attr("tip"),
						val = that.val()
					if (_x.isEmpty(val)) {
						_x.showTip("请输入" + tip + "！");
						mark = false
						return false
					}
					obj[that.attr("name")] = val
				})
				fn(obj, mark)
			}
			
			function upload_file(file,fileDom, callback){
                var xhr = new XMLHttpRequest(),
                    formData = new FormData()
                formData.append(fileDom.attr("name"),file);
                xhr.open("post","/aliyun/identifyCarCard",true);
                xhr.addEventListener("load",function(){
                    var result = JSON.parse(this.response);
                    callback(result)
                });

                xhr.addEventListener('error',function(e){//监听XMLHttpRequest对象的progress事件，读取完毕后触发
                	_x.showTip("上传失败,请检查您的网络！");
                });
                
                xhr.send(formData);
            }
            
			function saveSession (data, type) {
				var date = data.register_date
				if (type === 1) {// 图片识别
					date = dateFormat(data.register_date)
				}
				var obj = {
            			plate_num: data.plate_num,
            			model: data.model,
            			vin: data.vin,
            			engine_num: data.engine_num,
            			register_date: date
            		}
            	_x.setSessionStorage("xxIdentify", obj)
			}
			
			function dateFormat (data) {
            	var str = ""
            	for (var i = 0; i < data.length; i++) {
            		str += data[i]
            		if (i === 3 || i === 5) {
            			str += "-"
            		}	
            	}
            	return str
            }
		})
	</script>
</body>
</html>
